<template>
  <div class="formal-list-view view-container">

    <div class="main-content">

      <div class="list-container">

        <div class="filter-container">

          <el-form
            :inline="true"
            :model="formData"
            label-position="right"
            size="small"
            class="filter-form-inline"
          >
            <el-row
              :gutter="40"
              style="margin-left: 0px; margin-right: 0px"
            >
              <el-col
                :lg="5"
                :xs="4"
              >
                <el-form-item
                  label="负责职员"
                  style="width: 100%"
                >
                  <el-select
                    v-model="formData.selectType"
                    clearable
                    style="width: 100%"
                    placeholder="请选择"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in typeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>
              </el-col>

              <el-col
                :lg="5"
                :xs="4"
              >
                <el-form-item
                  label="终端名称"
                  style="width: 100%"
                >
                  <el-input
                    v-model="formData.terminalName"
                    clearable
                    placeholder="输入终端名称"
                  />
                </el-form-item>
              </el-col>

              <el-col
                :lg="5"
                :xs="4"
              >
                <el-form-item
                  label="产品信息"
                  style="width: 100%"
                >
                  <el-select
                    v-model="formData.productId"
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="remoteMethod"
                    :loading="loading"
                    placeholder="请选择产品"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="item in products"
                      :key="item.productId"
                      :label="item.name"
                      :value="item.productId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col
                :lg="2"
                :xs="2"
              >
                <el-form-item style="width: 100%">
                  <more-search-btn v-model:is-more="visible" />
                </el-form-item>
              </el-col>

              <el-col
                :lg="4"
                :xs="4"
              >
                <el-form-item style="width: 100%">
                  <el-button
                    class="border-btn"
                    @click="reset"
                  >重置</el-button>
                  <el-button
                    type="primary"
                    class="main-btn"
                    @click="listSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>

              <template v-if="visible">
                <el-col
                  :lg="5"
                  :xs="4"
                >
                  <el-form-item label="终端所在地">
                    <el-cascader
                      ref="cascader"
                      v-model="formData.areas"
                      :popper-append-to-body="false"
                      :options="citys"
                      :props="props1"
                      placeholder="请选择地区"
                      collapse-tags
                      @change="areaChange"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :lg="5"
                  :xs="4"
                >
                  <el-form-item label="营销模式">
                    <el-select
                      v-model="formData.agentType"
                      placeholder="请选择营销模式"
                      @change="listSearch"
                    >
                      <el-option
                        v-for="item in agentType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :lg="5"
                  :xs="4"
                >
                  <el-form-item
                    label="渠道客户"
                    style="width: 100%"
                  >
                    <el-input
                      v-model="formData.agentName"
                      clearable
                      placeholder="请输入渠道客户"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :lg="5"
                  :xs="4"
                >
                  <el-form-item
                    label="配送商"
                    style="width: 100%"
                  >
                    <el-input
                      v-model="formData.distributeName"
                      clearable
                      placeholder="请输入配送商"
                    />
                  </el-form-item>
                </el-col>
              </template>

            </el-row>
          </el-form>

        </div>

        <table-view
          :data="tableData"
          :visible="visible"
          @row-click="rowClick"
        >
          <el-table-column
            show-overflow-tooltip
            align="left"
            fixed="left"
            header-align="center"
            prop="productInfoDetail.productPopularName"
            label="产品名称"
            :min-width="150"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            prop="productInfoDetail.approvalNumber"
            label="批准文号"
            :min-width="150"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            prop="productInfoDetail.packSpecs"
            label="包装规格"
            :min-width="100"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="准入模式"
            :min-width="100"
          >
            <template #default="scope">
              {{ getLabel('access_mode',scope.row.accessMode) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="价格属性"
            :min-width="100"
          >
            <template #default="scope">
              <span v-if="scope.row.productPriceStrategyDetail">{{ getLabel('price_type',scope.row.productPriceStrategyDetail.priceType) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="终端价(元)"
            :min-width="100"
          >
            <template #default="scope">
              <div>{{ scope.row.terminalPrice }}</div>

              <div
                v-if="scope.row.processDefinitionKey==='productPriceChange'&&scope.row.flowStatus==='DOING'"
                class="flow-status-color"
              >
                [终端价变更审核中]
              </div>
              <div
                v-if="scope.row.processDefinitionKey==='relationStandardChangeTerminalPrice'&&scope.row.flowStatus==='DOING'"
                class="flow-status-color"
              >
                [更换终端价审核中]
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="left"
            header-align="center"
            prop="terminalName"
            label="营销终端"
            :min-width="150"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            label="所在地区"
            :min-width="100"
          >
            <template #default="{row}">
              <span>{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="agentName"
            label="营销模式"
            :min-width="120"
          >
            <template #default="scope">
              {{ getLabel('agent_type',scope.row.sellMode) }}
              <span v-if="scope.row.agentAttribute">[{{ getLabel(scope.row.sellMode,scope.row.agentAttribute) }}]</span>
            </template>

          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="left"
            header-align="center"
            prop="agentDetail.agentName"
            label="渠道客户名称"
            :min-width="150"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="agentName"
            label="交易价(元)"
            :min-width="150"
          >
            <template #default="scope">
              <div>{{ scope.row.tradePrice }}</div>
              <div
                v-if="(scope.row.processDefinitionKey == 'agentProductChangePrice' || scope.row.processDefinitionKey == 'agentPersonProductChangePrice') && scope.row.flowStatus=='DOING'"
                class="flow-status-color"
              >交易价变更审核中</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            label="配送商"
            :min-width="150"
          >
            <template #default="scope">
              <distributors-view
                v-if="scope.row.distributeContractDetails && scope.row.distributeContractDetails.length"
                :datas="scope.row.distributeContractDetails"
                :unit="scope.row.productInfoDetail?.sellUnit"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="headName"
            label="负责营销职员"
            :min-width="100"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="交易状态"
            fixed="right"
            :min-width="150"
          >
            <template #default="scope">
              {{ getStatus((scope.row)) }}
            </template>
          </el-table-column>
        </table-view>

        <Pagination
          v-model:page="formData.page"
          v-model:limit="formData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getListData"
        />

      </div>

    </div>

  </div>

</template>

<script>
import {crmStore} from '../../../../store'
import area from '../../../../../../utils/area'
import {useRouter} from 'vue-router'
import {defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'Index',
  setup() {
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    const router = useRouter()
    const typeOption = ref([
      {
        label: '全部',
        value: '',
      },
      {
        label: '我负责的',
        value: '1',
      },
      {
        label: '我下级负责的',
        value: '2',
      },
      {
        label: '我部门负责的',
        value: '3',
      },
    ])
    const citys = area
    const props1 = reactive({
      multiple: true,
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })

    var data = reactive({
      formData: {
        page: 1,
        pageSize: 20,
        selectType: '',
        terminalName: '',
        productId: '',
        areas: [],
        region: [],
        agentType: '',
        agentName: '',
        distributeName: '',
      },
      total: 0,
      tableData: [],
      loading: false,
      products: [],
      visible: false,
      cascader: null,
      agentType: crmStore.getters['dictionary/getDictionary']['agent_type'],
    })

    const rowClick = (row) => {
      router.push({ name: 'formalDetail', query: { id: row.id }})
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        data.cascader.getCheckedNodes()
      )
      data.formData.region = serve
      listSearch()
    }

    const remoteMethod = (query) => {
      data.products = []
      data.loading = true

      const a = {
        productName: '',
      }
      if (query) {
        a.productName = query
      }

      api.supplyChannels.SUPPLY_CHANNELS_FORMAL_STAN_LIST(a).then((res) => {
        if (!res.code && res.data) {
          res.data.forEach((item) => {
            item.name =
              item.productPopularName +
              '-' +
              item.approvalNumber +
              '-' +
              item.packSpecs
          })
          data.products = res.data

          data.loading = false
        }
      })
    }

    const getListData = () => {
      const a = JSON.parse(JSON.stringify(data.formData))
      a.productId = Number(a.productId)
      api.supplyChannels.SUPPLY_CHANNELS_FORMAL_LIST(a).then((res) => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
          data.total = res.data.total
        }
      })
    }

    const reset = () => {
      data.formData.page = 1
      data.formData.selectType = ''
      data.formData.terminalName = ''
      data.formData.productId = ''
      data.formData.areas = []
      data.formData.region = []
      data.formData.agentType = ''
      data.formData.distributeName = ''
      data.formData.agentName = ''
      data.products = []
      getListData()
    }

    const listSearch = () => {
      data.formData.page = 1
      getListData()
    }

    const getStatus = (row) => {
      switch (row.standardStatus) {
        case '-1':
          return '终止交易'
        case '1':
          return '正式交易'
      }
    }

    onBeforeMount(() => {
      getListData()
    })

    return {
      ...toRefs(data),
      typeOption,
      citys,
      props1,

      rowClick,
      listSearch,
      getListData,
      getStatus,
      reset,
      remoteMethod,
      areaChange,
    }
  },
})
</script>

<style scoped>
</style>
